<template>
  <div class="w-[100%] h-[100%]">
    <div class="mt-[0px]">
      <ContentWrap>
        <SearchBox :queryForm="searchList" :showExpland="false" @query="handleSearchQuery"
                   :show-export="false"/>
      </ContentWrap>
    </div>

    <div>
      <el-button type="primary" color="#3721FF" @click="handleBtnClick({type:'add'})">
        <Icon icon="ep:plus" class="mr-5px"/>
        新增
      </el-button>
    </div>

    <div class="mt-[30px]">
      <QueryTable
        :list="dataList"
        :total="total"
        :btns="tableBtnList"
        @execute="handleBtnClick"
        v-model="queryParams"
        :thead="th"
        :show-action="true"
      >
        <template #cover="{row}">
          <ImagePreview :src="row.cover" width="38px" height="38px"/>
        </template>

        <template #sku="{row}">
          <div>
            <div>{{ row.property }}/</div>
            <div>{{ row.sku }}</div>
          </div>
        </template>

        <template #productName="{row}">
          <span class="text-[#3721FF] cursor-pointer" v-copyText="row.name">{{
              row.productName
            }}</span>
        </template>
        <template #productId="{row}">
          <span class="text-[#3721FF] cursor-pointer" v-copyText="row.productId">{{
              row.productId
            }}</span>
        </template>

      </QueryTable>
    </div>


    <ComfirmPops ref="ConfirmPropsRef" :type="'radio'" @confirm="getConfirmValue" title="新增"
                 :show-icon="false" width="537">
      <template #content>
        <InfoAction ref="InfoActionRef" :info="selectedRow"/>
      </template>
    </ComfirmPops>

  </div>
</template>
<script setup lang="ts">
import QueryTable from "@/components/TableData/index.vue"
import ImagePreview from "@/components/ImagePreview/index.vue"

import {PurchaseStoreVO, PurchaseStoreApi} from "@/api/purchase/warehouse";

import {throttle, confirmPromote} from "@/utils";
import InfoAction from "./components/InfoAction.vue";
import type {TradeOrderQueryVO} from "@/api/mall/trade/order";
import {GlobeStateApi} from "@/api/logistics/globestate";
import { getGlobeState } from '@/api/publicInterf'

const ConfirmPropsRef = ref(null)
const InfoActionRef = ref(null)

const initQueryParams = {
  pageNo: 1, pageSize: 10
}

const searchList  = ref(
  [
  {
    label: '地区',
    code: 'stateId',
    type: 'select',
    options: [],
  },
]
)

const tableBtnList = ref([
  {
    color: '#3721FF',
    code: 'edit',
    name: '编辑'
  },
  {
    color: '#FF4E00',
    code: 'delItem',
    name: '删除'
  }
]);


const th = ref([
  {
    name: '地区',
    code: 'stateName',
    type: 'numberRanger',
    search: true
  },
  {
    name: '仓库名称',
    code: 'storeName',
    type: 'numberRanger',
    search: true
  },
]);

const dataList = ref<PurchaseStoreVO[]>([]);

const ids = ref<Array<string | number>>([]);
const total = ref(0);

const initRow: PurchaseStoreVO = {
  id: 0,
  name: undefined,
}

const selectedRow = ref<PurchaseStoreVO>({...initRow})

const queryParams = ref({
  ...initQueryParams
})


const handleBtnClick = e => {
  let type = e.type;
  try {
    fn[type](e)
  } catch (e) {
    console.log(`${type}不存在`)
  }
}

const fn = {
  pagination(){
    queryList();
  },
  add() {
    selectedRow.value = {}
    ConfirmPropsRef.value.show();
  },
  edit({data: {row}}) {
    selectedRow.value = {
      ...row,
      stateId:Number(row.stateId)
    }
    ConfirmPropsRef.value.show();
  },
  delItem: throttle(async ({data: {row}}) => {
    await confirmPromote({
      content: '确认删除数据吗？'
    })
    await PurchaseStoreApi.deletePurchaseStore(row.id);
    queryList();
  }, 1000)
}

const getConfirmValue =async () => {
  let form = await InfoActionRef.value.confirm();

  if (form.id) {
    await PurchaseStoreApi.updatePurchaseStore(form)
  } else {
    await PurchaseStoreApi.createPurchaseStore(form)
  }
  queryList();
  ConfirmPropsRef.value.hide();

}

const queryList = async () => {
  let res = await PurchaseStoreApi.getPurchaseStorePage(queryParams.value);
  total.value = res.total;
  dataList.value = res.list || [];
}

const getAreaList=async()=>{
  // let res = await
  let res = await getGlobeState();
  let item = searchList.value.find(at => {
    return at.code == "stateId"
  })

  console.log("??????????")

  item.options = (res || []).map(item=>{
    return {
      value:item.id,
      label:item.stateName
    }
  });
}


const handleSearchQuery = (val) => {
  /***
   * 搜索框查询条件，目前考虑在查询时 queryParams = {...val,pageNo:1,pageSize:10}
   * */
  queryParams.value = {
    ...initQueryParams,
    ...val
  }
  queryList();
}



onMounted(() => {
  queryList();

  getAreaList();
})


</script>
<style lang="scss" scoped>

</style>
